﻿<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>{$title}</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="/public/test/css/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="/public/test/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="/public/test/css/animate.css" type="text/css" />
  <link rel="stylesheet" href="/public/test/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="/public/test/css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="/public/test/css/font.css" type="text/css" />
  <link rel="stylesheet" href="/public/test/css/app.css" type="text/css" />
  
  <!--[if lt IE 9]>
    <script src="/public/test/js/html5shiv.js"></script>
    <script src="/public/test/js/respond.min.js"></script>
    <script src="/public/test/js/excanvas.js"></script>
  <![endif]-->
</head>
<body class="">
<span id="data_video" style="display: none;">{$data.video}</span>
<span id="data_picture" style="display: none;">{$data.picture}</span>
<span id="data_title" style="display: none;">{$data.title}</span>
  <section class="vbox">
{include file="index/header"/}
    <section>
      <section class="hbox stretch">
        <!-- .aside -->
              {include file="index/left"/}
                <!-- / nav -->
              </div>
            </section>
              {include file="index/footer"/}

          </section>
        </aside>
        <!-- /.aside -->
        <section id="content">
          <section class="vbox">
            <section class="scrollable wrapper-lg">
              <div class="row">
                <div class="col-sm-8">
                  <div class="panel">
                    <!-- video player -->
                    <div id="jp_container_1">
                      <div class="jp-type-single pos-rlt">
                        <div id="jplayer_1" class="jp-jplayer jp-video"></div>
                        <div class="jp-gui">
                          <div class="jp-video-play">
                            <a class="fa fa-5x text-white fa-play-circle"></a>
                          </div>
                          <div class="jp-interface bg-info padder">
                            <div class="jp-controls">
                              <div>
                                <a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                                <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                              </div>
                              <div class="jp-progress">
                                <div class="jp-seek-bar dker">
                                  <div class="jp-play-bar dk">
                                  </div>
                                  <div class="jp-title text-lt">
                                    <ul>
                                      <li></li>
                                    </ul>
                                  </div>
                                </div>
                              </div>
                              <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                              <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                              <div class="hidden-xs hidden-sm">
                                <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                                <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                              </div>
                              <div class="hidden-xs hidden-sm jp-volume">
                                <div class="jp-volume-bar dk">
                                  <div class="jp-volume-bar-value lter"></div>
                                </div>
                              </div>
                              <div>
                                <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                                <a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="jp-no-solution hide">
                          <span>Update Required</span>
                          To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                        </div>
                      </div>
                    </div>
                    <!-- / video player -->
                    <div class="wrapper-lg">
                      <h2 class="m-t-none text-black">{$data.title}</h2>
                      <div class="post-sum">
                        <p>
                          实验简介：{$data.profile}<br><br>
                          实验器材：{$data.material}<br><br>
                          实验重点：{$data.focus}<br><br>
                          实验内容：{$data.content}
                        </p>
                      </div>
                      <div class="line b-b"></div>
                      <div class="text-muted">
                        <i class="fa fa-user icon-muted"></i> by <a href="#" class="m-r-sm">Admin</a>
                        <i class="fa fa-clock-o icon-muted"></i> {$data.add_time}
                        <a href="#" class="m-l-sm"><i class="fa fa-comment-o icon-muted"></i> {$comments} comments</a>
                      </div>
                    </div>
                  </div>
                  <h4 class="m-t-lg m-b">{$comments} Comments</h4>
                  <section class="comment-list block">
                    {volist name="comment_list" id="comment"}
                    <article id="comment-id-1" class="comment-item">
                      <a class="pull-left thumb-sm">
                        <img src="{$comment['lord'][0]['photo']}" class="img-circle">
                      </a>
                      <section class="comment-body m-b">
                        <header>
                          <a href="#"><strong>{$comment['lord'][0]['username']}</strong></a>
                          <label class="label bg-info m-l-xs">{$comment['lord'][0]['type']}</label>
                          <span class="text-muted text-xs block m-t-xs">
                            {$comment['lord'][0]['add_time']}
                          </span>
                        </header>
                        <div class="m-t-sm">{$comment['lord'][0]['content']}</div>
                      </section>
                    </article>
                    {if condition="$comment['lord'][0]['node'] neq '0'"}
                      <article id="comment-id-2" class="comment-item comment-reply">
                        <a class="pull-left thumb-sm">
                          <img src="{$comment['from'][0]['photo']}" class="img-circle">
                        </a>
                        <section class="comment-body m-b">
                          <header>
                            <a href="#"><strong>{$comment['from'][0]['username']}</strong></a>
                            <label class="label bg-dark m-l-xs">{$comment['from'][0]['type']}</label>
                            <span class="text-muted text-xs block m-t-xs">
                              {$comment['from'][0]['add_time']}
                            </span>
                          </header>
                          <div class="m-t-sm">{$comment['from'][0]['content']}</div>
                        </section>
                      </article>
                    {/if}
                    {/volist}
                    <!-- .comment-reply -->


                    <!-- / .comment-reply -->
                    <!--<article id="comment-id-2" class="comment-item">-->
                      <!--<a class="pull-left thumb-sm">-->
                        <!--<img src="picture/a2.png" class="img-circle">-->
                      <!--</a>-->
                      <!--<section class="comment-body m-b">-->
                        <!--<header>-->
                          <!--<a href="#"><strong>John smith</strong></a>-->
                          <!--<label class="label bg-dark m-l-xs">Admin</label> -->
                          <!--<span class="text-muted text-xs block m-t-xs">-->
                            <!--26 minutes ago-->
                          <!--</span>-->
                        <!--</header>-->
                        <!--&lt;!&ndash;<blockquote class="m-t">&ndash;&gt;-->
                          <!--&lt;!&ndash;<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>&ndash;&gt;-->
                          <!--&lt;!&ndash;<small>Someone famous in <cite title="Source Title">Source Title</cite></small>&ndash;&gt;-->
                        <!--&lt;!&ndash;</blockquote>&ndash;&gt;-->
                        <!--<div class="m-t-sm">Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</div>-->
                      <!--</section>-->
                    <!--</article>-->
                  </section>
                  <h4 class="m-t-lg m-b">更多评论</h4>
                  {if condition="$User.username neq '0'"}
                  <form method="post" action="/index.php/index/index/comment">
                    <!--<div class="form-group pull-in clearfix">-->
                      <!--<div class="col-sm-6">-->
                        <!--<label>Your name</label>-->
                        <!--<input type="text" class="form-control" placeholder="Name">-->
                      <!--</div>-->
                      <!--<div class="col-sm-6">-->
                        <!--<label >Email</label>-->
                        <!--<input type="email" class="form-control" placeholder="Enter email">-->
                      <!--</div>-->
                    <!--</div>-->
                    <div class="form-group">
                      <label>我的评论</label>
                      <input type="hidden" name="tip" value="1">
                      <input type="hidden" name="e_id" value="{$data.e_id}">
                      <input type="hidden" name="e_title" value="{$data.title}">
                      <textarea class="form-control" name="content" rows="5" placeholder="输入评论内容"></textarea>
                    </div>
                    <div class="form-group">
                      <button type="submit" class="btn btn-success">提交评论</button>
                    </div>
                  </form>
                  {/if}
                  {if condition="$User.username eq '0'"}
                  <form method="" action="">
                    <div class="form-group">
                      <label>我的评论</label>
                      <input type="hidden" name="tip" value="1">
                      <input type="hidden" name="e_id" value="">
                      <input type="hidden" name="e_title" value="">
                      <textarea class="form-control" name="content" rows="5" disabled="disabled" placeholder="未登录不可评论"></textarea>
                    </div>
                    <div class="form-group">
                      <button type="button" class="btn btn-success">提交评论</button>
                    </div>
                  </form>
                  {/if}
                </div>
                <div class="col-sm-4">
                  <div class="panel panel-default">
                    <div class="panel-heading">最新实验视频 6个</div>
                    <div class="panel-body">

                      {volist name="new_data" id="data"}
                      <article class="media">
                        <a href="#" class="pull-left thumb-lg m-t-xs">
                          <img src="{$data.picture}">
                        </a>
                        <div class="media-body">                        
                          <a href="#" class="font-semibold">{$data.title}</a>
                          <div class="text-xs block m-t-xs"><a href="#">MFC</a> {$data.add_time}</div>
                        </div>
                      </article>
                      {/volist}
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>
      </section>
    </section>    
  </section>
  <script src="/public/test/js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="/public/test/js/bootstrap.js"></script>
  <!-- App -->
  <script src="/public/test/js/app.js"></script>
  <script src="/public/test/js/jquery.slimscroll.min.js"></script>
  
  <script src="/public/test/js/app.plugin.js"></script>
  <script type="text/javascript" src="/public/test/js/jquery.jplayer.min.js"></script>
  <script type="text/javascript" src="/public/test/js/jplayer.playlist.min.js"></script>
  <script type="text/javascript" src="/public/test/js/demo.js"></script>
</body>
</html>